<template>
  <!--卡片视图-->
  <el-card>
    <!--面包屑导航区域-->
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-table :data='rightsList' border stripe>
      <el-table-column type='index' width="60" label='序列'></el-table-column>
      <el-table-column label='权限名称' prop='authName'></el-table-column>
      <el-table-column label='权限等级'>
        <template v-slot:='scope'>
          <el-tag v-if='scope.row.level === 0'>一级权限</el-tag>
          <el-tag v-if='scope.row.level === 1' type="success">二级权限</el-tag>
          <el-tag v-if='scope.row.level === 2' type="warning">三级权限</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {getCurrentInstance, onMounted, ref} from "vue";
import axios from "axios";
const msg = getCurrentInstance().appContext.config.globalProperties.$message

let rightsList=ref([]);

onMounted(()=>{
  selectAllRight();
})

function selectAllRight(){
  const options = {
    //获取用户信息和权限信息
    url: '/permission/selectAllRight',
    method: 'GET',
    headers: {'Content-Type': 'application/json'}
  };

  axios(options).then(res => {
    let mg = res.data;
    if (mg.meta.code === 200) {
      rightsList.value=mg.data;
    } else {
      msg.error(mg.meta.msg);
    }
  }).catch(err => {
    //网络异常啥的
    msg.error(err);
  })
}

</script>

<style scoped>
  .el-breadcrumb{
    margin-bottom: 20px;
  }
</style>
